<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>考试测试  </title>
		<link rel="stylesheet" href="http://cdn.amazeui.org/amazeui/2.7.2/css/amazeui.min.css" />
		<style>
			th{
				text-align: center;
			}
			td{
				text-align: center;
			}
			.dataDiv{
				margin-top: 50px;
			}
		</style>
	</head>
	<body>
	
		<div class="am-container dataDiv" id="myForm">
		
			<section class="am-panel am-panel-primary">
			  <header class="am-panel-hd">
			    <h3 class="am-panel-title">信息展示</h3>
			  </header>
			  <div class="am-panel-bd">
  <form action="admin/index.do" name="myForm" method="post">
		<table class="table table-hover">
 			<thead>
 				<tr>
			<th colspan="3">
				<button title="点击此按钮刷新下方表格数据，ajax处理" class="am-btn am-btn-primary">刷新数据</button>
				
			</th>
		    </tr>
 			</thead>
 			<tbody>
 				<c:if test="${not empty eame }">
 					<c:forEach items="${eame}" var="sp" varStatus="i">
		 				<tr>
		 					<td><input type="checkbox" > </td>
		 					<td>${sp.name }</td>
		 					<td>${sp.age }</td>
		 				</tr>
	 				</c:forEach>
 				</c:if>
 				<c:if test="${empty eame }">
 					<tr><td>当前查询结果为空!</td></tr>
 				</c:if>
 				
 				<tr>
								
					<td colspan="3">
						<button class="am-btn am-btn-primary" title="点击后将所有数据的checkbox修改为选中状态" onclick="checkAll();" id="checkAll">全选</button>
						<button class="am-btn am-btn-primary" title="点击后将所有数据的checkbox修改为未选中状态" onclick="checkNot();" id="checkNot">全不选</button>
						<button class="am-btn am-btn-primary" title="点击后，已选择的checkbox改为未选择，未选择的checkbox改为已选择" onclick="check();" id="check">反选</button>
						<button class="am-btn am-btn-warning" title="点击后提交已选择数据的value值" onclick="sub();">提交已选择数据</button>
					</td>
				</tr>
 				
 			</tbody>
		</table>
	</form>
			  </div>
			 
			</section>
		</div>
		
		
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.min.js"></script>
<script>
	//全选
	function checkAll(){
		var ca = document.getElementById('checkAll');
		console.log("是否选中："+ca.checked);
		var check = ca.checked;
		var checkboxes = document.getElementsByName('checkid');
		for(var i=0;i<checkboxes.length;i++){
			var c = checkboxes[i];//当前遍历到的checkbox
			if(check){
				//如果是全部选中的状态，则把当前遍历的check选中
				c.checked=true;
			}else{
				//如果是不选的状态，则把当前遍历的check非选中
				c.checked=false;
			}	
		}
		
	}
</script>
<script>
	//全不选
	function checkNot(){
		var ca = document.getElementById('checkNot');
		console.log("是否选中："+ca.checked);
		var check = ca.checked;
		var checkboxes = document.getElementsByName('checkid');
		for(var i=0;i<checkboxes.length;i++){
			var c = checkboxes[i];//当前遍历到的checkbox
			if(check){
				//如果是全部选中的状态，则把当前遍历的check非选中
				c.checked=false;
			}else{
				//如果是不选的状态，则把当前遍历的check非选中
				c.checked=false;
			}	
		}
		
	}
</script>
<script>
	//反选
	function check(){
		var ca = document.getElementById('check');
		console.log("是否选中："+ca.checked);
		var check = ca.checked;
		var checkboxes = document.getElementsByName('checkid');
		for(var i=0;i<checkboxes.length;i++){
			var c = checkboxes[i];//当前遍历到的checkbox
			if(check){
				//如果是全部选中的状态，则把当前遍历的check非选中
				c.checked=false;
			}else{
				//如果是不选的状态，则把当前遍历的check选中
				c.checked=true;
			}	
		}
		
	}
</script>
<script >
$( function(){
	  
	 $('#myForm').load("index.html");
	 
	 })
</script>
  <script >
  $(document).ready(
     function sub(){
    	 $.post("admin/index.do",$("#myForm").serialize(), function(){
    		 
    	 })
     })
  </script>
  
	</body>
</html>

